<template>
    <div class="searchbar-wrapper" :style="{ backgroundColor: outerBg }">
        <div class="input-container" :style="{ backgroundColor: innerColor }" :class="{ 'boder': hasBorder }">
            <img :src="search">
            <span>想吃什么搜这里，如川菜</span>
        </div>
    </div>
</template>

<script setup>
import search from '@/assets/images/search.png'
defineProps(["outerBg", "innerColor", "hasBorder"])

</script>

<style lang="scss" scoped>
@import '@/assets/boreder.scss';

.searchbar-wrapper {

    padding: 10px 15px;
    // background-color: #f5f5f5;

    .input-container {

        width: 100%;
        height: 40px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;

        // background-color: #fff;
        position: relative;

        &.boder {

            @include scborder(1px, solid, #ee7530, 5px);

        }

        >img {
            width: 20px;
        }

        >span {
            font-size: 16px;
            padding-left: 5px;
            color: #666;
        }
    }
}
</style>